<template>
	<view class="team-container">
		<view v-for="(member, memberIndex) in teamList" :key="member.objectId" class="member-section">
			<swiper class="swiper" circular autoplay interval="3000" duration="1000">
				<swiper-item v-for="(img, index) in memberBanners[memberIndex]" :key="index">
					<image :src="img" mode="aspectFill" class="swiper-img"></image>
				</swiper-item>
			</swiper>
			<view class="team-item">
				<view class="info">
					<view class="name">{{member.username}}</view>
					<view class="email">{{member.email}}</view>
					<view class="motto">{{member.userA}}</view>
					<view class="divider"></view>
					<view class="work-content">
						<view class="work-title">负责内容：</view>
						<view class="work-desc">{{member.userB}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, onMounted } from 'vue'
	import { CONFIG } from "../../utils/config"
	
	const teamList = ref([])
	const memberBanners = ref([
		// 党林龙的轮播图
		[
			'https://img.mcfengqi.icu/LightPicture/2025/01/ff33b333561295f9.jpg',
			'https://img.mcfengqi.icu/LightPicture/2025/01/7077dbb0005990b6.jpg'
		],
		// 杜旭晨的轮播图
		[
			'https://img.mcfengqi.icu/LightPicture/2025/01/aec623c40cc06a09.jpg',
			'https://img.mcfengqi.icu/LightPicture/2025/01/6b23e1a1c86f742d.jpg'
		]
	])
	
	async function getTeamMembers() {
		try {
			let res = await uni.$get(CONFIG.leanCloud_url + "/1.1/classes/team")
			if (res.statusCode == 200) {
				teamList.value = res.data.results
			}
		} catch (error) {
			console.error("获取团队成员失败：", error)
			uni.showToast({
				title: '获取团队成员失败',
				icon: 'none'
			})
		}
	}
	
	onMounted(() => {
		getTeamMembers()
	})
</script>

<style lang="scss" scoped>
.team-container {
	padding: 15px;
	
	.member-section {
		margin-bottom: 20px;
		
		.swiper {
			width: 100%;
			height: 180px;
			border-radius: 12px;
			overflow: hidden;
			margin-bottom: 15px;
			
			.swiper-img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				border: 1px solid #000;
			}
		}
		
		.team-item {
			background-color: #ffffff;
			border-radius: 12px;
			padding: 15px;
			display: flex;
			border: 1px solid #000;
			
			.info {
				flex: 1;
				
				.name {
					font-size: 18px;
					font-weight: bold;
					color: #333;
					margin-bottom: 5px;
				}
				
				.email {
					font-size: 14px;
					color: #007AFF;
					margin-bottom: 8px;
				}
				
				.motto {
					font-size: 15px;
					color: #ff2756;
					margin-bottom: 12px;
				}
				
				.divider {
					height: 1px;
					background-color: #eee;
					margin: 10px 0;
				}
				
				.work-content {
					.work-title {
						font-size: 14px;
						color: #333;
						font-weight: bold;
						margin-bottom: 5px;
					}
					
					.work-desc {
						font-size: 14px;
						color: #666;
						line-height: 1.6;
					}
				}
			}
		}
	}
}
</style> 